<template>
  <el-container>
    <el-container>
      <!-- 头层 -->
      <div class="topbar">
        <div class="nav">
          <ul>
            <li>
              <button type="button" class="el-button el-button--text">
                <!---->
                <!---->
                <span>登录</span>
              </button>
              <span class="sep">|</span>
              <button type="button" class="el-button el-button--text">
                <!---->
                <!---->
                <span>注册</span>
              </button>
            </li>
            <li><a href="#/order" class="">我的订单</a></li>
            <li><a href="#/collect" class="">我的收藏</a></li>
            <li class="shopCart">
              <a href="#/shoppingCart" class="">
                <i class="el-icon-shopping-cart-full"></i>
                购物车
                <span class="num">(0)</span>
              </a>
            </li>
          </ul>
        </div>
      </div>
      <!-- 搜索栏层 -->
      <el-header class="el-header" style="height: 60px;">
        <ul role="menubar" class="el-menu-demo el-menu--horizontal el-menu">
          <div class="logo" tabindex="0">
            <img src="../imgs/Logo.png" alt="" />
          </div>
          <li
            role="menuitem"
            tabindex="0"
            class="el-menu-item is-active"
            style="
              border-bottom-color: rgb(64, 158, 255);
              color: rgb(64, 158, 255);
            "
          >
            首页
          </li>
          <li
            role="menuitem"
            tabindex="0"
            class="el-menu-item"
            style="border-bottom-color: transparent;"
          >
            全部商品
          </li>
          <li
            role="menuitem"
            tabindex="0"
            class="el-menu-item"
            style="border-bottom-color: transparent;"
          >
            关于我们
          </li>
          <div class="so" tabindex="0">
            <div class="el-input el-input-group el-input-group--append">
              <!---->
              <input
                type="text"
                autocomplete="off"
                placeholder="请输入搜索内容"
                class="el-input__inner"
              />
              <!---->
              <!---->
              <div class="el-input-group__append">
                <button type="button" class="el-button el-button--default">
                  <!---->
                  <i class="el-icon-search"></i>
                  <!---->
                </button>
              </div>
              <!---->
            </div>
          </div>
        </ul>
      </el-header>
      <!-- 轮播图 -->
      <el-row class="photo">
        <el-carousel height="500px">
          <el-carousel-item v-for="item in 4" :key="item"></el-carousel-item>
        </el-carousel>
      </el-row>
    </el-container>
    <el-header class="font">推荐列表</el-header>
    <el-container>
      <!-- 商品推荐 -->
      <el-aside class="recommend">
        <el-image
          style="width: 299px; height: 646px;"
          :src="url"
          :fit="fit"
        ></el-image>
      </el-aside>
      <el-row class="form">
        <el-col class="one">
          <img
            src="http://106.15.179.105:3000/public/imgs/phone/Redmi-k30.png"
            alt=""
          />
          <h2 class="name">Redmi K30</h2>
          <h3 class="describe">120hz流速屏，全速热爱</h3>
          <p class="money"><el-link type="warning">1599</el-link></p>
        </el-col>
        <el-col class="two">
          <img
            src="http://106.15.179.105:3000/public/imgs/appliance/AirCondition-F3W1.png"
            alt=""
          />
          <h2 class="name">变频空调</h2>
          <h3 class="describe">静音制冷，解暑神器</h3>
          <p class="money"><el-link type="warning">2699</el-link></p>
        </el-col>
        <el-col class="three">
          <img
            src="http://106.15.179.105:3000/public/imgs/appliance/Washer-Pro-10.png"
            alt=""
          />
          <h2 class="name">全自动互联网洗衣机</h2>
          <h3 class="describe">智能洗烘一体，省心更省力</h3>
          <p class="money"><el-link type="warning">2999</el-link></p>
        </el-col>
        <el-col class="four">
          <img
            src="http://106.15.179.105:3000/public/imgs/appliance/MiTv-E55A.png"
            alt=""
          />
          <h2 class="name">全面屏电视</h2>
          <h3 class="describe">全面屏设计，人工智能语音</h3>
          <p class="money"><el-link type="warning">1599</el-link></p>
        </el-col>
        <el-col class="five">
          <img
            src="http://106.15.179.105:3000/public/imgs/phone/Redmi-8A.png"
            alt=""
          />
          <h2 class="name">Redmi 8A</h2>
          <h3 class="describe">超长续航，性价比之王</h3>
          <p class="money"><el-link type="warning">599</el-link></p>
        </el-col>
        <el-col class="six">
          <img
            src="http://106.15.179.105:3000/public/imgs/phone/Redmi-k30.png"
            alt=""
          />
          <h2 class="name">Redmi K30</h2>
          <h3 class="describe">120hz流速屏，全速热爱</h3>
          <p class="money"><el-link type="warning">1599</el-link></p>
        </el-col>
        <el-col class="seven">
          <img
            src="http://106.15.179.105:3000/public/imgs/phone/Redmi-k30.png"
            alt=""
          />
          <h2 class="name">Redmi K30</h2>
          <h3 class="describe">120hz流速屏，全速热爱</h3>
          <p class="money"><el-link type="warning">1599</el-link></p>
        </el-col>
        <el-col class="eight">
          <el-button>点击浏览更多>></el-button>
        </el-col>
      </el-row>
    </el-container>
    <!-- 备案号 -->
    <el-footer>
      <div style="width: 300px; margin: 0 auto; padding: 20px 0;">
        <a
          target="_blank"
          href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=35018202000233"
          style="
            display: inline-block;
            text-decoration: none;
            height: 20px;
            line-height: 20px;
          "
        >
          <img
            src="https://jkd.link/img/%E5%A4%87%E6%A1%88%E5%9B%BE%E6%A0%87.png"
            style="float: left;"
          />
          <p
            style="
              float: left;
              height: 20px;
              line-height: 20px;
              margin: 0px 0px 0px 5px;
              color: #939393;
            "
          >
            闽公网安备35018202000233号
          </p>
        </a>
        <a
          target="_blank"
          href="https://beian.miit.gov.cn/#/Integrated/recordQuery"
          style="
            display: inline-block;
            text-decoration: none;
            height: 20px;
            line-height: 20px;
          "
        >
          <p
            style="
              float: left;
              height: 20px;
              line-height: 20px;
              margin: 0px 0px 0px 5px;
              color: #939393;
            "
          >
            闽ICP备2020020768号
          </p>
        </a>
      </div>
    </el-footer>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      fits: ['fill'],
      url: 'http://106.15.179.105:3000/public/imgs/phone/phone.png',
    }
  },
}
</script>

<style>
.wu {
  height: 0px !important;
}
/* 头部和搜索栏 */
* {
  margin: 0;
  border: none;
  list-style: none;
}
a,
a:hover {
  text-decoration: none;
}
.topbar {
  height: 40px;
  background-color: #3d3d3d;
  margin-bottom: 20px;
}
.topbar .nav {
  width: 1225px;
  margin: 0 auto;
}
.topbar .nav ul {
  float: right;
}
.topbar .nav li {
  float: left;
  height: 40px;
  color: #b0b0b0;
  font-size: 14px;
  text-align: center;
  line-height: 40px;
  margin-left: 20px;
}
.topbar .nav .sep {
  color: #b0b0b0;
  font-size: 12px;
  margin: 0 5px;
}
.topbar .nav li .el-button {
  color: #b0b0b0;
}
.topbar .nav .el-button:hover {
  color: #fff;
}
.topbar .nav li a {
  color: #b0b0b0;
}
.topbar .nav a:hover {
  color: #fff;
}
.topbar .nav .shopCart {
  width: 120px;
  background: #424242;
}
.topbar .nav .shopCart:hover {
  background: #fff;
}
.topbar .nav .shopCart:hover a {
  color: #ff6700;
}
.topbar .nav .shopCart-full {
  width: 120px;
  background: #ff6700;
}
.topbar .nav .shopCart-full a {
  color: #fff;
}
.el-header .el-menu {
  max-width: 1225px;
  margin: 0 auto;
}
.el-header .logo {
  height: 62px;
  width: 75px;
  float: left;
  margin-right: 10px;
}
.el-header .so {
  margin-top: 10px;
  width: 300px;
  float: right;
}
/* 轮播图样式 */
.photo {
  max-width: 1225px;
  margin-left: 110px;
  margin-top: 20px;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
/* 商品推荐图 */
.font {
  font-size: 30px;
  text-align: center;
  margin-top: 10px;
  height: 40px !important;
}
.recommend {
  background-color: #99a9bf;
  width: 250px;
  height: 650px;
  margin-left: 110px;
  margin-top: 10px;
}
.one,
.two,
.three,
.four,
.five,
.six,
.seven,
.eight {
  width: 220px !important;
  height: 320px;
  margin-left: 10px;
  margin-top: 10px;
}
.form img {
  width: 210px !important;
}
.name {
  font-size: 16px;
}
.name,
.describe {
  font-weight: 400;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.describe {
  margin: 5px 10px;
  height: 18px;
  font-size: 12px;
  color: #b0b0b0;
}
.money {
  margin: 10px 10px 10px;
  text-align: center;
}
.money .el-link {
  font-size: 20px;
}
.eight {
  text-align: center;
  line-height: 280px;
}

/* 备案号 */
.el-header .el-menu {
  max-width: 1225px;
  margin: 0 auto;
}
.el-header .logo {
  height: 62px;
  width: 75px;
  float: left;
  margin-right: 10px;
}
.el-header .so {
  margin-top: 10px;
  width: 300px;
  float: right;
}
.el-footer {
  background-color: #3d3d3d;
  height: 80px !important;
  margin-top: 20px;
}

.el-col {
  border: 1px solid rgb(124, 206, 16);
}
</style>
